<template>
  <el-drawer v-model="visible" title="用户详情" size="85%" @close="closeDrawer">
    <div class="user-detail-container">
      <!-- 基础信息区块 -->
      <div class="section">
        <h3 class="section-title">基本信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="头像">
            <el-avatar :size="80" :src="userInfo.avatar" />
          </el-descriptions-item>
          <el-descriptions-item label="昵称">
            <el-tag>{{ userInfo.nickname ?? '-' }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="真实姓名">{{ userInfo.real_name ?? '-' }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ userInfo.phone }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{ userInfo.id_card ?? '-' }}</el-descriptions-item>
          <el-descriptions-item label="性别">
            <el-tag :type="userInfo.sex === 1 ? 'primary' : 'danger'">
              {{ userInfo.sex === 1 ? '男' : '女' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="生日">{{ userInfo.birth_day ?? '-' }}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{ userInfo.age ?? '-' }} 岁</el-descriptions-item>
          <el-descriptions-item label="注册时间">{{ userInfo.create_time }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 社交数据统计 -->
      <div class="section">
        <h3 class="section-title">社交数据</h3>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-number">{{ socialStats.likes }}</div>
              <div class="stat-label">获赞总数</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-number">{{ socialStats.following }}</div>
              <div class="stat-label">关注数</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-number">{{ socialStats.followers }}</div>
              <div class="stat-label">粉丝数</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-number">{{ socialStats.friends }}</div>
              <div class="stat-label">好友数</div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 好友列表 -->
      <div class="section">
        <h3 class="section-title">好友列表</h3>
        <el-table :data="friendsList" stripe style="width: 100%">
          <el-table-column label="好友头像">
            <template #default="{ row }">
              <el-avatar :size="40" :src="row.avatar" />
            </template>
          </el-table-column>
          <el-table-column prop="nickname" label="昵称" />
          <el-table-column label="备注">
            <template #default="{ row }">
              <el-tag v-if="row.remark" type="info">{{ row.remark }}</el-tag>
              <span v-else class="empty-text">暂无备注</span>
            </template>
          </el-table-column>
          <el-table-column prop="relationDate" label="成为好友时间" />
          <el-table-column label="操作" width="120">
            <template #default>
              <el-button type="danger" size="small">移除好友</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getUserInfo as getUserInfoApi } from "@/api/user";

// 定义用户详情接口
interface UserDetail {
  avatar?: string; // 头像字段改为可选
  nickname?: string;
  real_name?: string;
  phone?: string;
  id_card?: string;
  sex?: number; // 性别字段
  birth_day?: string;
  age?: number;
  create_time?: string;
}

// 社交统计数据接口
interface SocialStats {
  likes: number
  following: number
  followers: number
  friends: number
}

// 好友列表接口
interface Friend {
  id: number
  avatar: string
  nickname: string
  remark?: string
  relationDate: string
}

// 抽屉显示状态
const visible = ref(false)

// 用户信息，初始化为空对象并指定类型
const userInfo = ref<UserDetail>({})

// 社交数据
const socialStats = ref<SocialStats>({
  likes: 2456,
  following: 128,
  followers: 345,
  friends: 56
})

// 好友列表
const friendsList = ref<Friend[]>([
  {
    id: 1,
    avatar: 'https://example.com/avatar1.jpg',
    nickname: '用户A',
    remark: '大学同学',
    relationDate: '2022-05-01'
  },
  {
    id: 2,
    avatar: 'https://example.com/avatar2.jpg',
    nickname: '用户B',
    relationDate: '2023-01-15'
  }
])

// 打开抽屉
const openDrawer = (userId: number) => {
  console.log('用户ID:', userId)
  getUserInfo(userId);
  visible.value = true;
}

// 关闭抽屉
const closeDrawer = () => {
  visible.value = false;
}

// 暴露方法
defineExpose({
  openDrawer
})

// 获取用户详情信息
const getUserInfo = async (userId: number) => {
  try {
    const response = await getUserInfoApi(userId);
    userInfo.value = response.data || {}; // 确保返回数据为空时不会报错
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}
</script>

<style scoped lang="scss">
.user-detail-container {
  //padding: 20px;

  .section {
    margin-bottom: 30px;

    &-title {
      color: #606266;
      font-size: 16px;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ebeef5;
    }
  }

  .stat-card {
    background: #f5f7fa;
    border-radius: 8px;
    padding: 20px;
    text-align: center;

    &-number {
      font-size: 24px;
      font-weight: bold;
      color: var(--el-color-primary);
      margin-bottom: 8px;
    }

    &-label {
      color: #909399;
      font-size: 14px;
    }
  }

  .empty-text {
    color: #c0c4cc;
    font-style: italic;
  }

  :deep(.el-descriptions) {
    margin-top: 15px;
  }

  :deep(.el-tag) {
    margin-right: 5px;
  }
}
</style>